<!-- 配置项尚未初始化时的提示信息 -->
<template>
    <h4 class="c-title">初始化配置</h4>
    <span style="color: red">部分配置项尚未初始化，无法构建 UI 界面，请初始化后继续操作</span> <br><br>
    <el-table :data="state.initList" class="data-table" ref="data-table">
        <td-info type="text" name="分组" prop="groupName" />
        <td-info type="text" name="配置项" prop="name" min-width="150px"/>
        <td-info type="textarea" name="配置值" show-overflow-tooltip min-width="240px">
            <template #default="s">
                <p>{{ s.row.value }}</p>
            </template>
        </td-info>
        <td-info type="textarea" name="备注" prop="remarks" min-width="120px" />
        <td-info type="textarea" name="初始化">
            <template #default="s">
                <b v-if="s.row.isInit" style="color: green;">已初始化</b>
                <el-link v-else type="primary" @click="add(s.row)">+ 添加</el-link>
            </template>
        </td-info>
    </el-table>
</template>

<script setup name="com-init-config">
import {onMounted, reactive} from "vue";

// 组件参数 
const prop = defineProps({
    groupName: {type: String},
    names: {type: Array},
    dataList: {type: Array}
})

// 数据 
const state = reactive({
    initList: [] // 初始化集合 
})

// 初始化数据 
onMounted(() => {
    state.initList = initDataList(prop.dataList, prop.names);
})

// 查找数据 
const findData = function (dataList, name) {
    for (const item of dataList) {
        if(item.name === name) {
            item.isInit = true;
            return item;
        }
    }
    // 查找不到，就新建一个并返回 
    return {
        groupName: prop.groupName,
        name: name,
        value: '',
        isInit: false
    };
}

// 初始化数据 
const initDataList = function (dataList, names) {
    const arr = [];
    for (const name of names) {
        const data = findData(dataList, name)
        arr.push(data);
    }
    return arr;
}

// 弹窗快捷添加配置
const add = function (data) {
    sa.showModel('添加一个配置项', () => import('./sp-config-add'), {groupName: data.groupName, name: data.name});
}

// 添加配置后的回调
const addConfigCall = function (name, value, remarks) {
    // 修改配置 
    for (const item of state.initList) {
        if(item.name === name) {
            item.value = value;
            item.remarks = remarks;
            item.isInit = true;
        }
    }
    // 如果全部都已经初始化了，则刷新页面
    let initCount = 0;
    for (const item of state.initList) {
        if(item.isInit) {
            initCount++;
        }
    }
    if(initCount >= state.initList.length) {
        sa.currView().f5();
    }
}
defineExpose({addConfigCall})

</script>

<style scoped>
.data-table{max-width: 1000px;}
</style>
